<template>
  <div class="index">
    <Header page="index"></Header>
    <!-- banner图 -->
    <div class="bannerContainer">
      <van-swipe :autoplay="3000" class="banner">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image.image" class="bannerImg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 通知 -->
    <div class="notice">
      <div class="notice_titile">
        <span class="notice_titile_words" @click="$router.push('/announcement')">竞拍公告</span>
      </div>
      <div class="notice_info">
        <p>{{ notice }}</p>
      </div>
    </div>

    <!-- section -->
    <div class="section">
      <!-- 按钮集合 -->
      <div class="btn_navigation">
        <van-button type="default" class="btn btn_navigation1">平台规则</van-button>
        <van-button type="default" class="btn btn_navigation2">等级规则</van-button>
        <van-button type="default" class="btn btn_navigation3" @click="watchWarranty">保修查询</van-button>
      </div>

      <!-- 保修证明弹出框 -->
      <div>
        <van-dialog
          v-model="showWarranty"
          class="btn_navigation_warranty"
          :close-on-click-overlay="true"
          :beforeClose="queryWarranty"
        >
          <h2 class="warranty_title">请输入IMEI码查询</h2>
          <p class="warranty_info">一品数码会平台保修</p>
          <van-cell-group class="IMEI_input">
            <van-field class="IMEI_inputCode" v-model="imeiCode" placeholder="请输入IMEI" />
          </van-cell-group>
        </van-dialog>
      </div>

      <!-- 通知集合 -->
      <div class="notice_navigation">
        <div class="notice_navigation_top">
          <span class="notice_navigation_title">一品数码会竞拍</span>
          <!-- 倒计时 -->
          <div class="notice_navigation_countdown">
            <van-count-down :time="countDownTime" class="countdown" />
          </div>
        </div>
        <div class="notice_navigation_bottom">
          <p class="notice_navigation_bottom_info">20:00-次日2:00，价格不公开，更多捡漏可能</p>
        </div>
      </div>

      <!-- 专区 -->
      <div class="zone">
        <div class="zone_item" v-for="(item, index) in zoneList" :key="index">
          <div class="zone_item_time">
            <van-count-down :time="item.time" class="countdown" />
          </div>
          <h2 class="zone_item_text">{{ item.nickname }}专区</h2>
          <p class="zone_item_info">共{{item.goods_number}}件宝贝，￥{{item.min_price}}~￥{{item.max_price}}</p>
        </div>
      </div>

      <!-- 一口价 -->
      <div class="notice_navigation" style="padding-bottom: 0">
        <div class="notice_navigation_top">
          <span class="notice_navigation_title">一口价</span>
        </div>
        <div class="notice_navigation_bottom">
          <p class="notice_navigation_bottom_info">好货全天售</p>
        </div>
      </div>

      <!-- 下拉菜单 -->
      <div class="dropdown_menu">
        <van-dropdown-menu active-color="#ee0a24" class="dropdown_menu_navigation">
          <van-dropdown-item class="ropdown_menu_item" title="品类型号" ref="item1">
            <div class="top_select_item">
              <van-radio-group v-model="radio" class="select_group" @change="topSelect">
                <van-radio v-for="(item, index) in typeSelectItem" :key="index" :name="index">
                  <span
                    class="item_tag"
                    slot="icon"
                    slot-scope="props"
                    :class="props.checked ? 'item_tag_checked' : ''"
                  >{{ item.value }}</span>
                </van-radio>
              </van-radio-group>
            </div>
            <div class="bottom_select_item">
              <van-tree-select
                active-color="#ee0a24"
                :items="items"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-nav="clickNav"
                @click-item="clickItem"
              />
            </div>
            <div class="bottom_btn">
              <van-button class="reset select_btn" type="default" @click="resetBtn1">重置</van-button>
              <van-button class="confirm select_btn" type="default" @click="confirmBtn1">确认</van-button>
            </div>
          </van-dropdown-item>

          <van-dropdown-item class="ropdown_menu_item" title="等级" ref="item3">
            <van-radio-group v-model="gradeSelect" class="class_select_content">
              <van-cell-group class="class_select_group">
                <van-cell
                  class="class_select_item"
                  title="全部"
                  clickable
                  @click="gradeSelect = 'All'"
                >
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="All" />
                </van-cell>
              </van-cell-group>
              <van-cell-group class="class_select_group">
                <van-cell class="class_select_item" title="A" clickable @click="gradeSelect = 'A'">
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="A" />
                </van-cell>
              </van-cell-group>
              <van-cell-group class="class_select_group">
                <van-cell
                  class="class_select_item"
                  title="B+2"
                  clickable
                  @click="gradeSelect = 'B+2'"
                >
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="B+2" />
                </van-cell>
              </van-cell-group>
              <van-cell-group class="class_select_group">
                <van-cell class="class_select_item" title="C" clickable @click="gradeSelect = 'C'">
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="C" />
                </van-cell>
              </van-cell-group>
              <van-cell-group class="class_select_group">
                <van-cell class="class_select_item" title="D" clickable @click="gradeSelect = 'D'">
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="D" />
                </van-cell>
              </van-cell-group>
              <van-cell-group class="class_select_group">
                <van-cell
                  class="class_select_item"
                  title="E+2"
                  clickable
                  @click="gradeSelect = 'E+2'"
                >
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="E+2" />
                </van-cell>
              </van-cell-group>
              <van-cell-group class="class_select_group">
                <van-cell
                  class="class_select_item"
                  title="F+2"
                  clickable
                  @click="gradeSelect = 'F+2'"
                >
                  <van-radio checked-color="#FF3B3E" slot="right-icon" name="F+2" />
                </van-cell>
              </van-cell-group>
            </van-radio-group>
            <div class="bottom_btn">
              <van-button class="reset select_btn" type="default" @click="resetBtn3">重置</van-button>
              <van-button class="confirm select_btn" type="default" @click="confirmBtn3">确认</van-button>
            </div>
          </van-dropdown-item>

          <van-dropdown-item class="ropdown_menu_item" title="筛选" ref="item2">
            <div class="grade_select_item">
              <div class="grade_select_content">
                <h3 class="grade_select_text">价格范围</h3>
                <van-cell-group class="grade_select_input">
                  <van-field
                    class="grade_select_input_price"
                    v-model="priceStart"
                    placeholder="最低价"
                  />
                </van-cell-group>
                <em class="grade_select_icon">-</em>
                <van-cell-group class="grade_select_input">
                  <van-field class="grade_select_input_price" v-model="priceEnd" placeholder="最高价" />
                </van-cell-group>
              </div>
            </div>
            <div class="bottom_btn">
              <van-button class="reset select_btn" type="default" @click="resetBtn2">重置</van-button>
              <van-button class="confirm select_btn" type="default" @click="confirmBtn2">确认</van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>

      <!-- 商品列表 -->
      <div class="goods_navigation">
        <div
          class="goods_navigation_item"
          v-for="(item, index) in goodsList"
          :key="index"
          @click="toGoodsDetail(item.id)"
        >
          <div class="goods_item_left">
            <van-image class="goods_item_img" :src="item.main_image" />
          </div>
          <div class="goods_item_right">
            <div class="goods_item_right_top">
              <span class="goods_item_grade">{{ item.goods_class }}</span>
              <h3 class="goods_item_title">{{ item.title }}</h3>
            </div>
            <p class="goods_item_info">{{ item.description }}</p>
            <span class="goods_item_price">￥{{ item.direct_price }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 竞拍弹出框 auction -->
    <van-dialog
      v-model="auction"
      confirm-button-text="去支付"
      class="dialog_auction"
      :beforeClose="payAuction"
    >
      <h2 class="auction_title">恭喜你</h2>
      <p class="auction_info">
        竞拍成功
        <span style="color: #FF3B3E;">3</span>个宝贝
      </p>
    </van-dialog>

    <!-- 底部选项 -->
    <Footer page="index"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import {
  Swipe,
  SwipeItem,
  Lazyload,
  Button,
  CountDown,
  DropdownMenu,
  DropdownItem,
  Image,
  Dialog,
  Field,
  Toast,
  RadioGroup,
  Radio,
  TreeSelect
} from "Vant";
export default {
  data() {
    return {
      images: [], // 轮播图
      notice: "继父回家实发风就是给对方高度更待何时啊大大大", // 通知消息
      countDownTime: 60 * 60 * 1000, // 倒计时,
      zoneList: [
        {
          time: 60 * 60 * 1000,
          text: "手机专区",
          info: "工11件宝贝，￥1.00~￥1230"
        },
        {
          time: 60 * 60 * 1000,
          text: "笔记本专区",
          info: "工11件宝贝，￥1.00~￥1230"
        },
        {
          time: 60 * 60 * 1000,
          text: "数码专区",
          info: "工11件宝贝，￥1.00~￥1230"
        },
        {
          time: 60 * 60 * 1000,
          text: "平板专区",
          info: "工11件宝贝，￥1.00~￥1230"
        }
      ], // 专区数据
      showWarranty: false, // 保修证明弹出框
      auction: false, // 竞拍弹出框
      imeiCode: "", // IMEI码
      select: "", // 筛选
      /**
       * 品类型号顶部筛选
       */
      radio: 0, // 默认品类型号顶部筛选选中状态
      typeSelectItem: [
        { id: 1, value: "手机" },
        { id: 2, value: "平板" },
        { id: 3, value: "笔记本" },
        { id: 4, value: "其他数码" }
      ],
      /**
       * 品类型号底部筛选
       */
      items: [
        {
          // 导航名称
          text: "全部",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 2
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "苹果",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "华为vxada1",
              id: 2
            },
            {
              text: "华为12",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "荣耀",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "荣耀1asgd",
              id: 2
            },
            {
              text: "荣耀2sfds",
              id: 3
            }
          ]
        }
      ],
      activeId: 1,
      activeIndex: 0,
      // 一口价商品列表
      /**
       * 价格筛选
       */
      priceStart: "",
      priceEnd: "",
      /**
       * 等级筛选
       */
      gradeSelect: "All",
      goodsList: [],
    };
  },
  created() {
    this.getBannerList()
    this.getZoneList()
    this.getGoodsList()
  },
  components: {
    Header,
    Footer,
    [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    // 获取 banner 图数据
    getBannerList() {
      this.$axios.get('/api/index/bannerList').then(res => {
        console.log(res)
        if (res.data.code === 1) {
          this.images = res.data.data
        }
      })
    },

    // 获取竞拍专区列表
    getZoneList() {
      this.$axios.get('/api/index/auctionAreaList').then(res => {
        console.log(res)
        if (res.data.code === 1) {
          this.zoneList = res.data.data
        }
      })
    },

    // 获取一口价商品列表
    getGoodsList() {
      this.$axios.get('/api/index/directGoodsList').then(res => {
        console.log(res)
        if (res.data.code === 1) {
          this.goodsList = res.data.data
        }
      })
    },


    // 品类型号顶部筛选
    topSelect(e) {
      console.log(e, this.radio);
    },
    // 品类型号底部部筛选
    clickNav(index) {
      console.log(index);
    },
    clickItem(data) {
      console.log(data);
    },
    // 重置 确认
    resetBtn1() {
      this.activeIndex = 0;
      this.activeId = 1;
    },
    confirmBtn1() {
      console.log(this.activeIndex, this.activeId);
      this.$refs.item1.toggle();
    },

    resetBtn2() {
      this.priceStart = "";
      this.priceEnd = "";
    },
    confirmBtn2() {
      if (this.priceEnd < this.priceStart) {
        Toast("最高价不能低于最低价，请重新输入");
        this.priceStart = "";
        this.priceEnd = "";
      } else {
        console.log(this.priceStart, this.priceEnd);
        this.$refs.item2.toggle();
      }
    },
    // 中间按钮
    resetBtn3() {
      this.gradeSelect = "1";
    },
    confirmBtn3() {
      console.log(this.gradeSelect);
      this.$refs.item3.toggle();
    },

    // 保修证明
    watchWarranty() {
      this.showWarranty = !this.showWarranty;
    },

    //保修查询
    queryWarranty(action, done) {
      if (action == "overlay") {
        this.showWarranty = false;
      }
      // else if (this.imeiCode === "" || this.imeiCode === " ") {
      //   Toast("IMEI码不能为空");
      //   done(false);
      // }
      else {
        this.$router.push({
          path: "/warrantyQuery",
          query: { imei: this.imeiCode }
        });
      }
    },

    // 去支付
    payAuction() {
      console.log("去支付");
      // this.$router.push('/payAuction')
    },

    // 商品详情
    toGoodsDetail(id) {
      this.$router.push({ path: "/goodsDetail", query: { id: id } });
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.index {
  padding-bottom: 98px;
  .bannerContainer {
    width: 100%;
    .banner {
      height: 400px;
      background: rgba(255, 218, 68, 1);
      .bannerImg {
        width: 100%;
        height: 400px;
      }
    }
  }
  .notice {
    width: 100%;
    height: 98px;
    background: rgba(255, 255, 255, 1);
    .notice_titile {
      float: left;
      height: 100%;
      width: 26.67%;
      .notice_titile_words {
        display: block;
        width: 100%;
        height: 75px;
        line-height: 75px;
        text-align: center;
        margin-top: 11.5px;
        font-size: 34px;
        font-family: FZZYK;
        font-weight: bold;
        font-style: italic;
        color: rgba(255, 59, 62, 1);
        box-shadow: 1px 0 0 0 #999;
      }
    }
    .notice_info {
      float: left;
      height: 100%;
      width: 73.33%;
      p {
        margin: 0 auto;
        width: 450px;
        height: 24px;
        font-size: 24px;
        margin-top: 37px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .section {
    margin-top: 20px;
    background: rgba(255, 255, 255, 1);
    padding: 0 30px;
    padding-bottom: 98px;
    .btn_navigation {
      width: 100%;
      height: 180px;
      padding: 30px 0;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 216px;
        height: 120px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        border-radius: 12px;
      }
      .btn_navigation1 {
        background: rgba(48, 117, 246, 1);
        box-shadow: 0px 3px 18px 0px rgba(48, 117, 246, 0.4);
      }
      .btn_navigation2 {
        background: rgba(245, 179, 56, 1);
        box-shadow: 0px 3px 18px 0px rgba(245, 179, 56, 0.4);
      }
      .btn_navigation3 {
        background: rgba(82, 84, 195, 1);
        box-shadow: 0px 3px 18px 0px rgba(82, 84, 195, 0.4);
      }
    }
    .btn_navigation_warranty {
      padding: 68px 60px;
      width: 654px;
      height: 517px;
      background: rgba(255, 255, 255, 1);
      border-radius: 9px;
      .warranty_title {
        width: 320px;
        height: 92px;
        font-size: 38px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 92px;
        text-align: center;
        margin: 0 auto;
      }
      .warranty_info {
        width: 320px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(136, 136, 136, 1);
        line-height: 28px;
        text-align: center;
        margin: 0 auto;
      }
      .IMEI_input {
        width: 535px;
        height: 98px;
        margin-top: 60px;
      }
      .IMEI_inputCode {
        width: 535px;
        height: 98px;
        background: rgba(242, 242, 242, 1);
        border: 1px solid rgba(193, 193, 193, 1);
        border-radius: 9px;
      }
      @{deep} .van-field__body {
        width: 100%;
        height: 38px;
        margin: 0 auto;
      }
      @{deep} .van-field__control {
        font-size: 14px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        text-align: center;
      }
      @{deep} .van-dialog__footer {
        width: 150px;
        height: 44px;
        margin: 0 auto;
        margin-top: 45px;
      }
      @{deep} .van-button {
        width: 150px;
        height: 44px;
        background: linear-gradient(184deg, rgba(236, 105, 65, 0.63));
        border-radius: 44px;
        background-color: #ff3b3e;
      }
      @{deep} .van-button__text {
        font-size: 15px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(255, 255, 255, 1);
        line-height: 32px;
      }
    }
    .notice_navigation {
      margin-top: 20px;
      width: 100%;
      height: 140px;
      padding: 20px 0;
      .notice_navigation_top {
        width: 100%;
        height: 50px;
        .notice_navigation_title {
          display: block;
          float: left;
          margin-top: 4.5px;
          width: 296px;
          height: 41px;
          font-size: 42px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
        .notice_navigation_countdown {
          display: block;
          float: right;
          margin-top: 18px;
          margin-right: 20px;
          height: 29px;
          .countdown {
            display: block;
            width: 145px;
            height: 29px;
            font-size: 38px;
            font-family: Arial;
            font-weight: bold;
            color: rgba(255, 59, 62, 1);
          }
        }
      }
      .notice_navigation_bottom {
        width: 100%;
        height: 50px;
        padding-top: 19px;
        .notice_navigation_bottom_info {
          width: 486px;
          height: 24px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(136, 136, 136, 1);
        }
      }
    }
    .zone {
      width: 100%;
      background: rgba(255, 255, 255, 1);
      .zone_item {
        width: 100%;
        height: 240px;
        margin: 0 auto;
        overflow-x: hidden;
        background-color: #8b8da0;
        background: linear-gradient(-33deg, rgba(255, 255, 255, 0.2));
        box-shadow: 0px 3px 49px 2px rgba(136, 136, 136, 0.3);
        border-radius: 12px;
        margin-bottom: 30px;
        .zone_item_time {
          width: 240px;
          height: 58px;
          background: linear-gradient(0deg, rgba(255, 255, 255, 0.22));
          opacity: 0.7;
          padding-top: 18px;
          background-color: #232536;
          text-align: center;
          border-radius: 0 0 36px 0;
          .countdown {
            width: 175px;
            height: 22px;
            margin: 0 auto;
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .zone_item_text {
          width: 100%;
          height: 34px;
          margin: 0 auto;
          text-align: center;
          margin-top: 45px;
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
        }
        .zone_item_info {
          width: 100%;
          height: 25px;
          font-size: 24px;
          text-align: center;
          margin-top: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          opacity: 0.7;
        }
      }
    }
    .dropdown_menu {
      width: 100%;
      .dropdown_menu_navigation {
        .ropdown_menu_item {
          background: rgba(255, 255, 255, 1);
          /* 左边筛选 */
          .top_select_item {
            height: 120px;
            padding-bottom: 22px;
            .select_group {
              height: 100%;
              display: flex;
              justify-content: space-around;
              flex-direction: row;
              flex-wrap: nowrap;
              .item_tag {
                display: block;
                width: 150px;
                height: 58px;
                background: rgba(237, 237, 237, 1);
                border-radius: 29px;
                text-align: center;
                line-height: 58px;
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
              }
              .item_tag_checked {
                background: rgba(255, 240, 240, 1);
                color: rgba(255, 59, 62, 1);
              }
            }
          }
          .bottom_select_item {
            border-top: 1px solid rgba(206, 206, 206, 1);
            @{deep} .van-tree-select__nav {
              background: rgba(242, 242, 242, 1);
              .van-sidebar-item {
                text-align: center;
                line-height: 55px;
              }
            }
            @{deep} .van-sidebar-item--select {
              border-color: rgba(255, 59, 62, 1);
            }
            @{deep} .van-tree-select__content {
              padding-left: 16px;
              .van-ellipsis {
                text-align: center;
                line-height: 78px;
                border-bottom: 1px solid rgba(226, 226, 226, 1);
              }
            }
            @{deep} .van-tree-select__item--active {
              color: rgba(255, 59, 62, 1);
            }
          }
          .bottom_btn {
            width: 100%;
            height: 128px;
            background: rgba(250, 250, 250, 1);
            display: flex;
            justify-content: space-around;
            .select_btn {
              width: 260px;
              height: 58px;
              line-height: 58px;
              margin-top: 35px;
              font-family: SourceHanSansCN;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              background: rgba(255, 59, 62, 1);
              border-radius: 29px;
            }
            .reset {
              background: rgba(250, 250, 250, 1);
              border: 2px solid rgba(51, 51, 51, 1);
              color: rgba(51, 51, 51, 1);
            }
          }
          /* 右边筛选 */
          .grade_select_item {
            width: 100%;
            height: 200px;
            padding: 0 43px;
            border-top: 1px solid rgba(206, 206, 206, 1);
            .grade_select_content {
              width: 100%;
              padding-top: 66px;
              height: 68px;
              line-height: 68px;
              .grade_select_text {
                float: left;
                margin-right: 66px;
                font-size: 34px;
                font-family: PingFang SC;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
              }
              .grade_select_input {
                float: left;
                border-radius: 9px;
                .grade_select_input_price {
                  width: 200px;
                  background: rgba(250, 250, 250, 1);
                  border-radius: 9px;
                  border:1px solid rgba(193,193,193,1);
                }
              }
              .grade_select_icon {
                float: left;
                font-size: 26px;
                width: 26px;
                height: 3px;
              }
            }
          }
          /* 中间筛选 */
          .class_select_content {
            // height: 616px;
            width: 100%;
            padding: 0 27px;
            .class_select_group {
              .class_select_item {
                height: 90px;
              }
            }
          }
        }
        @{deep} .van-dropdown-menu__title {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .goods_navigation {
      width: 100%;
      height: 800px;
      .goods_navigation_item {
        width: 100%;
        height: 210px;
        padding: 30px 0;
        border-bottom: 1px solid rgba(226, 226, 226, 1);
        .goods_item_left {
          float: left;
          width: 120px;
          height: 120px;
          .goods_item_img {
            width: 120px;
            height: 120px;
          }
        }
        .goods_item_right {
          float: left;
          // width: 350px;
          margin-left: 30px;
          .goods_item_right_top {
            height: 34px;
            .goods_item_grade {
              float: left;
              width: 58px;
              height: 34px;
              background: linear-gradient(0deg, rgba(255, 127, 63, 0.3));
              background-color: #ff3b3e;
              border-radius: 17px;
              text-align: center;
              line-height: 34px;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
            }
            .goods_item_title {
              float: left;
              height: 34px;
              font-size: 32px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
              margin-left: 20px;
            }
          }
          .goods_item_info {
            width: 422px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(136, 136, 136, 1);
            line-height: 28px;
            margin-top: 20px;
          }
          .goods_item_price {
            display: block;
            height: 31px;
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            margin-top: 20px;
          }
        }
      }
    }
  }

  /**
  *弹出框
  */
  // 竞拍弹出框
  .dialog_auction {
    width: 654px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 9px;
    .auction_title {
      width: 120px;
      margin: 0 auto;
      margin-top: 104px;
      font-size: 38px;
      text-align: center;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 64px;
      border-radius: 9px;
    }
    .auction_info {
      width: 250px;
      font-size: 30px;
      margin: 0 auto;
      text-align: center;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 64px;
    }
    @{deep} .van-dialog__footer {
      position: absolute;
      bottom: -3px;
      width: 100%;
    }
    @{deep} .van-button {
      width: 100%;
      border-radius: 0 0 9px 9px;
      background-color: #ff3b3e;
    }
    @{deep} .van-button__text {
      font-size: 16px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
